// 模块化解决的第一个问题，就是作用域污染的问题，通过立即执行函数解决
init();

function init() {
    initTodoList;
}
var initTodoList = (function() {
    var showINput = document.getElementsByClassName('j-show-input')[0],
        inputWrap = document.getElementsByClassName('input-wrap')[0],
        addItem = document.getElementsByClassName('j-add-item')[0],
        texInput = document.getElementById('texInput'),
        oList = document.getElementsByClassName('j-list')[0],
        //学会使用标记
        isEdit = false,
        curIde = null,
        inputShow = false;
    addEvent(showINput, 'click', function() {
        console.log('打开');
        if (inputShow) {
            inputWrap.style.display = 'none';
            inputShow = false;
            restoteStatus();
        } else {
            inputWrap.style.display = 'block';
            inputShow = true;
        }
    })
    addEvent(addItem, 'click', function() {
        console.log('添加');
        var val = texInput.value,
            len = val.length,
            oItems = document.getElementsByClassName('item'),
            itemLen = oItems.length,

            item;
        if (len <= 0) {
            return
        }
        for (let i = 0; i < itemLen; i++) {
            item = elemChildren(oItems[i])[0];
            var text = item.innerText;
            if (val === text) {
                alert('已存在此项目');
                return;
            }
        }
        if (isEdit) {
            var itemContent = elemChildren(oItems[curIde])[0];
            itemContent.innerText = val;
            addItem.innerText = '增加项目';
            isEdit = false;
            curIde = null;
            inputWrap.style.display = 'none';
        } else {
            var oLi = document.createElement('li');
            oLi.className = 'item';
            oLi.innerHTML = itemTpl(val);
            oList.appendChild(oLi);
            texInput.value = '';
            inputWrap.style.display = 'none';
            inputShow = false;
        }

    });
    addEvent(oList, 'click', function(e) {
        var e = e || window.event,
            target = e.target || e.srcElement,
            className = target.className,
            oItems = document.getElementsByClassName('item'),
            item,
            liParent = elemParent(target, 2),
            tarIdex = Array.prototype.indexOf.call(oItems, liParent);
        if (className === 'edit-btn fa fa-edit') {
            var itemLen = oItems.length;
            inputWrap.style.display = 'block';
            inputShow = true;
            for (var i = 0; i < itemLen; i++) {
                item = oItems[i];
                console.log(item);
                item.className = 'item'
            }
            curIde = tarIdex
            liParent.className += ' active'
            addItem.innerText = '编辑第' + (curIde + 1) + '项';
            isEdit = true;
            console.log(addItem);
        } else if (className === 'remove-btn fa fa-times') {
            liParent.remove();
            console.log('删除');
        }
    })

    function restoteStatus() {
        isEdit = false;
        curIde = null;
        texInput.value = '';
        addItem.innerText = '增加项目';
    }

    function itemTpl(text) {
        return (
            '<p class="item-content">' + text + '</p>' +
            '<div  class="btn-group">' +
            '<a href="#" class="edit-btn fa fa-edit"></a>' +
            '<a href="#" class="remove-btn fa fa-times"></a>' +
            '</div>'
        )
    }
})()